<template>
  <g class="snow" :transform="props.transform">
    <rect width="8" height="8" :fill="b" />
    <Pixel x="0" y="0" :fill="c" />
    <Pixel x="3" y="0" :fill="a" />
    <Pixel x="4" y="0" :fill="c" />
    <Pixel x="0" y="3" :fill="a" />
    <Pixel x="0" y="4" :fill="c" />
    <Pixel
      v-for="(_, i) in 8"
      :key="'a' + i"
      :x="i"
      :y="7 - i"
      :fill="a"
    />
    <Pixel
      v-for="(_, i) in 7"
      :key="'b' + i"
      :x="i + 1"
      :y="7 - i"
      :fill="c"
    />
    <Pixel
      v-for="(_, i) in 4"
      :key="'c' + i"
      :x="i + 4"
      :y="7 - i"
      :fill="a"
    />
    <Pixel
      v-for="(_, i) in 3"
      :key="'d' + i"
      :x="i + 5"
      :y="7 - i"
      :fill="c"
    />
  </g>
</template>

<script setup>
  import Pixel from './Pixel.vue'

  const props = defineProps(['transform'])

  const a = '#ffffff'
  const b = '#adadad'
  const c = '#636363'
</script>

<style lang="scss" scoped>

</style>